import styles from './index.less'

import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'umi'; // useSelector, useDispatch也可以将models和view绑定

const Roles: React.FC = (props) => {
  const dispatch = useDispatch();

  const roles = useSelector((state) => state.userAuth.roles) || {};

  useEffect(() => {
    dispatch({ type: 'userAuth/getRoles' });
  }, []);

  return (
    <>
      <p>该实例是useSelector, useDispatch将models和view绑定，effects从接口获取的数据</p>
      <p>接口获取的角色数据（本地运行才能看到mock数据）：{roles.join('，')}</p>
    </>
  );
};

export default Roles;
